<template>
  <div  class="app-container calendar-list-container resgisterPS">
    <span class="login-btn" @click="tologin">登录</span>
    <el-steps class="width" :active="activeProgress" :space="500" finish-status="success" style="margin-top: 20px">
      <el-step title="1.填写手机号" icon="figure" description='1' :class="{process1:firstProgress}">
        <template slot="icon">
        </template>
      </el-step>
      <el-step title="2.完善信息" icon="figure" description='2' :class="{process1:secondProgress}">
        <template slot="icon">
        </template>
      </el-step>
      <el-step title="3.注册成功" icon="figure" description='3' :class="{process1:thirdProgress}">
        <template slot="icon">
        </template>
      </el-step>
    </el-steps>
    <div class="first-container" v-show="firstProgress">
      <el-form class="card-box login-form" :model="firstForm" :rules="firstRules" ref="firstForm" label-position="left" key="first">
        <el-form-item prop="username" class="other1">
          手机号：
          <el-input name="username" type="tel"  v-model="firstForm.username" autoComplete="off"
            placeholder="请输入手机号" class="input-username" maxlength="11">
            <template slot="prepend">+86<span>|</span></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="imgCode" class="style-append other2">
          图片验证码：
          <el-input name="imgCode" type="text"  v-model="firstForm.imgCode" autoComplete="off" placeholder="请输入验证码" class="input-code">
            <template slot="append">
              <img style="cursor: pointer;" @click="getImgVer" :src="imgCode.url" alt="">
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="messageCode" class="code-append other3">
          短信验证码：
          <el-input name="messageCode" type="text"  v-model="firstForm.messageCode" autoComplete="off" placeholder="请输入验证码" class="input-code">
            <template slot="append">
              <div class="codeBtn" v-bind:class="{ disable: isDisable}" @click="sendCode()">
                <span>|</span>
                {{sendText}}
              </div>
            </template>
          </el-input>
        </el-form-item>

        <el-button type="primary" class="nextBtn" :loading="loading" @click.native.prevent="handleNextOne">下一步</el-button>
      </el-form>
    </div>
    <div class="second-container" v-show="secondProgress">
      <el-form class="card-box second-form" :model="secondForm" :rules="secondRules" ref="secondForm" label-position="left" key="second">
        <div class="one-line">
          <el-form-item prop="adminName" label="姓名：" class="other5">
            <el-input name="adminName" type="text"  v-model="secondForm.adminName" placeholder="请输入您的真实姓名" class="input-password">
            </el-input>
          </el-form-item>
          <el-form-item prop="groupSize" class="other6">
            <el-select v-model="secondForm.groupSize" placeholder="团队规模">
              <el-option
                v-for="item in groupOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item prop="adminPassword" label="登录密码：" class="other4">
          <el-input name="adminPassword" type="password" v-model="secondForm.adminPassword" placeholder="请输入密码" class="input-password">
          </el-input>
        </el-form-item>
        <el-form-item prop="adminInvateCode" label="受邀请码：" class="other4">
          <el-input name="adminInvateCode" type="text"  v-model="secondForm.adminInvateCode" placeholder="请输入4位邀请码" class="input-password" maxlength="4">
          </el-input>
        </el-form-item>

        <el-button type="primary" class="nextBtn" :loading="loading" @click.native.prevent="handleNextTwo">下一步</el-button>
      </el-form>
    </div>
    <div class="third-container" v-show="thirdProgress">
      <div class="third-form">
        <!-- <div style="font-size:28px;margin-bottom:100px;color:#ed8a94;">恭喜您注册成功!</div>
        <div style="">
          <el-steps align-center>
            <el-step title="先设置“点”属性"></el-step>
            <el-step title="创建客户端账户"></el-step>
            <el-step title="手机访问 im.dots-x.com 开始使用"></el-step>
          </el-steps>
        </div> -->
        <img src="../../assets/common_images/resgister.png" alt="">
        <p>注册成功</p>
        <ul>
          <li>设置点评属性</li>
          <li>通讯录创建账号</li>
          <li>手机访问im.dots-x.com开始使用</li>
        </ul>
        <div style="margin-top:-20px;">
          <router-link to="/login/index">
            <el-button type="primary">登录</el-button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
/* 步骤条 */
  .resgisterPS .el-step.is-horizontal .el-step__line {
    width: 235px;
    height: 6px;
    top: 8px;
    left: 56px;
    background-color: #723f71;
  }
  .resgisterPS  .el-steps {
    width: 940px;
    margin-top: 20px;
    position: absolute;
    left: 45%;
    top: 81px;
    margin-left: -250px;
  }
  .el-step {
    position: relative;
  }
  .el-step >>> .el-step__description {
    font-size: 20px;
    position: absolute;
    top: 6px;
    left: 14px;
    z-index: 2;
  }
  .el-step__icon {
    background: #1d2b36;
  }
  .el-step .el-step__title {
    color: #723f71;
    margin-left: -20px;
  }
  .el-step .el-step__description {
    position: absolute;
    top: 6px;
    left: 14px;
    color: #333;
    z-index: 2;
    font-size: 20px;
  }
  .el-step.is-horizontal .el-step__line {
    width: 390px;
    height: 6px;
    top: 8px;
    left: 56px;
    background-color: #723f71;
  }
  .el-step__icon.is-icon {
    width: 44px;
    height: 44px;
    background-image: url(../../assets/common_images/step.png);
    position: relative;
    top: -11px;
    left: -2px;
  }
  .process1 .el-step__icon.is-icon  {
    background-image: url(../../assets/common_images/step-active.png);
  }
  .is-success .is-icon .el-icon-check:before {
    width: 0;
    height: 0;
    content: '';
  }
  .el-step__title.is-process {
    color: #4b9dfa;
  }
  .resgisterPS ::-webkit-input-placeholder {
    color: #92bbe3;
  }
  .login-form .other1 .el-input-group__prepend {
    width: 40px;
    height: 43px;
    line-height: 43px;
    padding: 0;
    border: none;
    float: left;
    font-size: 15px;
    color: #b9dcff;
    background: #648db6;
    position: relative;
    left: 20px;
  }
  .login-form .other3 .el-input-group__prepend {
    width: 40px;
    height: 43px;
    line-height: 43px;
    padding: 0;
    border: none;
    float: left;
    font-size: 15px;
    position: relative;
    left: 20px;
  }
  .login-form .other3 .codeBtn {
    color: #b9dcff;
    background: #648db6;
   }
   .login-form .other3 .codeBtn span {
    line-height: 43px;
    margin-right: 16px;
   }
  .login-form .other1 .el-input-group--prepend {
    width: 80%;
    height: 45px;
    border-radius: 45px;
    border: 1px solid #78a4cf;
    display: inline-block;
  }
  .login-form .other1 .el-input-group__prepend span {
    position: relative;
    left: 10px;
    top: -1px;
  }
  .login-form .other2,.login-form .other3 {
    position: relative;
    left: -28px;
  }
  .login-form .other3 {
    width: 110%;
  }
  .login-form .other2 .el-input-group--append {
    width: 50%;
    height: 45px;
    border-radius: 45px;
    border: 1px solid #78a4cf;
    display: inline-block;
    position: relative;
  }
  .login-form .other3 .el-input-group--append {
    width: 74%;
    height: 45px;
    border-radius: 45px;
    border: 1px solid #78a4cf;
    display: inline-block;
    position: relative;
  }
  .login-form .other1 input {
    width: 200px;
    height: 43px;
    line-height: 43px;
    margin: 0;
    padding: 0;
    border: none;
    float: left;
    background: #648db6;
    color: #fff;
    text-align: center !important;
    border-radius: 0px;
    -webkit-appearance: none;
  }
  .login-form .other2 input {
    width: 170px;
    height: 43px;
    line-height: 43px;
    border-radius: 43px;
    margin: 0;
    padding: 0;
    border: none;
    float: left;
    background: #648db6;
    color: #fff;
    text-align: center !important;
    -webkit-appearance: none;
  }
  .login-form .other3 input {
    width: 63%;
    height: 43px;
    line-height: 43px;
    margin: 0;
    padding: 0;
    border: none;
    float: left;
    background: #648db6;
    color: #fff;
    text-align: center !important;
    border-radius: 43px;
    -webkit-appearance: none;
  }
  .other4 .el-input {
    width: 400px;
    height: 47px;
    border: 1px solid #78a4cf;
    border-radius: 45px;
  }
  .other4 input {
    width: 98%;
    height: 45px!important;
    border: none;
    border-radius: 47px;
    line-height: 45px!important;
    margin: 0;
    padding: 0;
    float: left;
    background: #648db6;
    color: #fff;
    text-align: center !important;
    -webkit-appearance: none;
  }
  .other4 .el-form-item__label, .other5 .el-form-item__label {
    color: #92bbe3;
  }
  .one-line:after {
    content: '';
    display: block;
    clear: both;
  }
  .other5 {
    width: 248px;
    margin-left: 26px;
  }
  .other5,.other6 {
    float: left;
  }
  .other5 .el-input {
    width: 160px;
    height: 47px;
    border: 1px solid #78a4cf;
    border-radius: 45px;
  }
  .other5 input {
    width: 98%;
    height: 45px!important;
    border: none;
    border-radius: 47px;
    line-height: 45px!important;
    margin: 0;
    padding: 0;
    float: left;
    background: #648db6;
    color: #fff;
    text-align: center !important;
    -webkit-appearance: none;
  }
  .other6 .el-select input {
    height: 45px;
    line-height: 45px;
    border-radius: 45px;
  }
  .el-select input {
    background-color: RGB(76,119,164);
    border-color: #78a4cf;
    color: #fff;
    border-radius: 15px;
  }
  .el-select-dropdown {
    background-color: RGB(76,119,164);

  }
  .el-select-dropdown  li {
    color: #fff;
  }
  .el-select-dropdown  li.hover {
    color: #78a4cf;
  }
  .el-popper[x-placement^=bottom] .popper__arrow {
    background-color: #648db6;
  }
  .el-popper[x-placement^=bottom] .popper__arrow::after {
    background-color: #648db6;
    border-bottom-color: RGB(76,119,164);
  }
  .el-select .el-input.is-focus .el-input__inner{
    border-color: #78a4cf;
    border-radius: 48px;
  }
  .el-select-dropdown.el-popper {
    border: 1px solid #78a4cf;
  }
  .el-form-item.is-success .el-input__inner,
  .el-form-item.is-success .el-input__inner:focus,
  .el-form-item.is-success .el-textarea__inner,
  .el-form-item.is-success .el-textarea__inner:focus {
    border-color: #78a4cf;
  }
  .login-form .other2 .el-input-group__append {
    width: 121px;
    padding: 0;
    margin: 0;
    border: none;
    background: #648db6;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: -135px;
  }
  .login-form .other3 .el-input-group__append {
    width: 66px;
    padding: 0;
    margin: 0;
    border: none;
    background: #648db6;
    cursor: pointer;
    position: relative;
    right: -20px;
  }
  .login-form .other2 .el-input-group__append img {
    width: 74%;
    height: 43px;
  }
  .login-form .other1 .el-form-item__error {
    color: #bb0000;
    margin-left: 150px;
  }
  .other4 .el-form-item__error {
    color: #bb0000;
    margin-left: 240px;
    margin-top: -13px;
  }
  .other5 .el-form-item__error {
    color: #bb0000;
    margin-left: 80px;
    margin-top: -13px;
  }
  .login-form .other2 .el-form-item__error,.login-form .other3 .el-form-item__error {
    color: #bb0000;
    margin-left: 130px;
  }
  .second-container .el-form {
    position: relative;
    top: 58px;
  }
  /* 步骤条 */
</style>
<style  rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  $bg:#1d2b36;
  $dark_gray:#e85858;
  $light_gray:#eee;

  .app-container {
      @include relative;
      height: 100vh;
      min-height: 620px;
      background-color: $bg;
      background-image: url("../../assets/common_images/login-resgister.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: bottom;
      input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
        -webkit-text-fill-color: #fff !important;
      }
  }
  .login-btn {
    color: #466f99;
    font-size: 20px;
    position: absolute;
    top: 23px;
    left: 70%;
    cursor: pointer;
  }
  .el-input--medium >>> .el-input__inner {
    height: 47px;
    text-align: left;
    padding: 12px;
    border: none;
    background: #648db6;
  }
  .forgetPS ::-webkit-input-placeholder {
    color: #92bbe3;
  }
   .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
  }
  .login-form {
    width: 650px;
    color: #b9dcff;
    background-color: #648db6;
    border-radius: 5px;
    padding: 35px 150px 15px;
    margin: 150px auto 0px;
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
  }
  .el-form-item__error {
    color: #f56c6c;
    text-align: center;
    width: 100%;
    padding: 5px 0 0 0;
  }
  .second-form {
    position: relative;
    left: 0;
    right: 0;
    width: 600px;
    padding: 35px 35px 15px 35px;
    margin: 150px auto 0px;
    background-color: #648db6;
    border-radius: 5px;
  }
  .third-form {
    position: relative;
    left: 0;
    right: 0;
    width: 800px;
    padding: 40px 15px;
    margin: 230px auto 0px;
    background-color: #648db6;
    border-radius: 5px;
    text-align: center;
  }
  .third-form > p {
    margin: 20px auto 35px;
    color: #fff;
    font-size: 20px;
  }
  .third-form ul {
    width: 500px;
    position: absolute;
    left: 200px;
    top: 158px;
  }
  .third-form li {
    width: 50%;
    color: #b9dcff;
    font-size: 16px;
    line-height: 45px;
    text-align: left;
    float: left;
  }
  .third-form button {
    width: 300px;
    margin-top: 150px;
    border: none;
    border-radius: 50px;
    background: -webkit-gradient(linear, left top, right top, from(#4fd7f7), to(#4b9dfa));
  }
  .login-form >>> .el-form-item__error {
    color: #f84242;
    text-align: left;
    width: 100%;
    padding: 5px 0 0 0;
  }
  .second-form >>> .el-form-item__error {
    color: #f84242;
    margin-left:110px;
    width: 100%;
    padding: 5px 0 0 0;
  }
  input {
    background: transparent;
    border: 0px;
    -webkit-appearance: none;
    border-radius: 0px;
    padding: 12px 5px 12px 20px;
    color: #a3a3a3;
    height: 47px;
  }
  .el-input--medium >>> .el-input__inner {
    height: 47px;
    text-align: left;
    padding: 12px;
    border: solid 1px #ccc;
  }
  .input-username .el-input__inner{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
  }
  .input-pass .el-input__inner{
    border-radius:5px;
  }
  .input-code .el-input__inner{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
  }
  .el-input-group__append, .el-input-group__prepend{
    border: solid 1px #ccc;
  }
  .el-input-group__append{
    border-left:0
  }
  .el-input-group__prepend{
    border-right:0;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select:none;
  }
  .thirdparty-button{
    position: absolute;
    right: 35px;
    bottom: 28px;
  }
  span.input-slot{
    display: inline-block;
    width:100px;
  }
  .nextBtn{
    width:300px;
    margin-bottom:30px;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    margin-top:20px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(left, #4fd7f7, #4b9dfa);
  }
  .second-form >>>.el-form-item--medium .el-form-item__label{
    line-height:47px;
    display: inline-block;
    width:110px;
  }
  .third-form >>> .el-step__title.is-wait {
    color:#4d4d4d;
  }
  .third-form >>> .el-step__head.is-wait{
    color:#4d4d4d;
  }
  .third-form >>> .el-step__line{
    background-color:#4d4d4d;
  }
  .third-form >>> .el-step__icon.is-text{
    border-color:#4d4d4d;
  }
  .style-append >>> .el-input-group__append{
    padding:0;
    background-color: #fff;
  }
  .code-append >>> .el-input-group__append{
    width:139px;
    text-align: center;
  }
</style>
<script>
  import { imgVerify, messageVerify, perfectInfo, isPhone } from '@/api/login'
  export default {
    name: 'login',
    data() {
      const validateUsername = (rule, value, callback) => {
        if (value.length < 1) {
          callback(new Error('手机号不能为空'))
        } else {
          if (!(/^1\d{10}$/.test(value))) {
            callback(new Error('请输入正确的手机号'))
          } else {
            callback()
          }
          callback()
        }
      }
      const validateImgCode = (rule, value, callback) => {
        if (value.length < 1) {
          callback(new Error('图片验证码不能为空'))
        } else {
          if (value.toUpperCase() !== this.imgCode.code) {
            callback(new Error('图片验证码错误'))
          } else {
            callback()
          }
        }
      }
      const validateMessageCode = (rule, value, callback) => {
        if (value.length < 1) {
          callback(new Error('短信验证码不能为空'))
        } else {
          this.verifyCode(callback)
        }
      }
      const validateAdminPassword = (rule, value, callback) => {
        if (value.length < 8) {
          callback(new Error('密码不能小于8位'))
        } else if (!(/^(?![^a-zA-Z]+$)(?!\D+$)/.test(value))) {
          callback(new Error('密码必须包含数字、字母'))
        } else {
          callback()
        }
      }
      const validateAdminName = (rule, value, callback) => {
        if (value.length < 1) {
          callback(new Error('管理员姓名不能为空'))
        } else if (value.length > 6) {
          callback(new Error('管理员姓名长度不能大于6位'))
        } else {
          callback()
        }
      }
      const validateAdminInvateCode = (rule, value, callback) => {
        if (value.length < 1) {
          callback(new Error('邀请码不能为空'))
        } else if (value.length !== 4) {
          callback(new Error('请输入4位邀请码'))
        } else {
          callback()
        }
      }
      return {
        imgCode: [],
        phone: '',
        firstForm: {
          username: '',
          imgCode: '',
          messageCode: ''
        },
        secondForm: {
          adminName: '',
          adminPassword: '',
          groupSize: '',
          adminInvateCode: ''
        },
        firstRules: {
          username: [{ required: true, trigger: 'blur', validator: validateUsername }],
          messageCode: [{ required: true, trigger: 'blur', validator: validateMessageCode }],
          imgCode: [{ required: true, trigger: 'blur', validator: validateImgCode }]
        },
        secondRules: {
          adminName: [{ trigger: 'blur', validator: validateAdminName }],
          adminPassword: [{ trigger: 'blur', validator: validateAdminPassword }],
          groupSize: [{ message: '请选择团队规模', trigger: 'change' }],
          adminInvateCode: [{ trigger: 'blur', validator: validateAdminInvateCode }]
        },
        pwdType: 'password',
        eyeType: 'eye',
        loading: false,
        sendText: '获取',
        time: 60,
        isDisable: false,
        groupOptions: [{
          value: '1',
          label: '50人以下'
        }, {
          value: '2',
          label: '50-100人'
        }, {
          value: '3',
          label: '100人以上(不建议选)'
        }],
        activeProgress: 0,
        firstProgress: true,
        secondProgress: false,
        thirdProgress: false
      }
    },
    methods: {
      getImgVer() {
        imgVerify().then(response => {
          this.imgCode = response.data
        })
      },
      // 短信验证码的验证
      verifyCode(callback) {
        messageVerify({
          phone: this.firstForm.username,
          smscode: this.firstForm.messageCode
        }).then(function(response) {
          const msg = JSON.parse(response.request.response).msg
          if (msg === '验证码错误') {
            callback(new Error('验证码错误'))
          } else {
            callback()
          }
        })
      },
      tologin() {
        this.$router.push('/login')
      },
      handleNextOne() {
        this.$refs.firstForm.validate(valid => {
          if (valid) {
            this.loading = false
            this.phone = this.firstForm.username
            this.activeProgress = 1
            this.firstProgress = false
            this.secondProgress = true
            this.$refs.firstForm.resetFields()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      handleNextTwo() {
        this.$refs.secondForm.validate(valid => {
          if (valid) {
            perfectInfo(Object.assign({}, { 'phone': this.phone, 'username': this.secondForm.adminName, 'teamsize': this.secondForm.groupSize, 'password': this.secondForm.adminPassword, 'invite_code': this.secondForm.adminInvateCode })).then(response => {
              this.loading = false
              this.activeProgress = 2
              this.firstProgress = false
              this.secondProgress = false
              this.thirdProgress = true
              this.$refs.secondForm.resetFields()
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      sendCode() {
        // 判断是否在读秒中
        if (this.time === 60) {
          if (this.firstForm.username === '') { // 手机号为空
            this.$notify.error({
              title: '错误',
              message: '手机号不能为空'
            })
          } else {
            this.isDisable = true
            isPhone({ phone: this.firstForm.username, scene: 2 }).then(response => {
              this.countTime()
            })
          }
        }
      },
      countTime() {
        if (this.time !== 0) {
          this.time = this.time - 1
          this.sendText = this.time + 'S'
          setTimeout(() => {
            this.countTime()
          }, 1000)
        } else {
          this.time = 60
          this.sendText = '重新获取'
          this.isDisable = false
        }
      }
    },
    created() {
      this.getImgVer()
    }
  }
</script>
